﻿@using System.Threading.Tasks
@using AbpZeroTemplate.Tenants.Dashboard.Dto
@using AbpZeroTemplate.Web.Areas.AppAreaName.Startup
@{
    ViewBag.CurrentPageName = AppAreaNamePageNames.Tenant.Dashboard;
}
@section Styles {
    <link rel="stylesheet" href="~/lib/morris.js/morris.css" asp-append-version="true" />
    <link rel="stylesheet" abp-href="/view-resources/Areas/AppAreaName/Views/Dashboard/Index.css" asp-append-version="true" />
}

@section Scripts {
    <script abp-src="/view-resources/Areas/AppAreaName/Views/_Bundles/tenant-dashboard-libs.js" asp-append-version="true"></script>
}

<div class="m-subheader">
    <div class="d-flex align-items-center">
        <div class="mr-auto">
            <h3 class="m-subheader__title m-subheader__title--separator">
                <span>@L("Dashboard")</span>
            </h3>
            <span class="m-section__sub">
                @L("DashboardHeaderInfo")
            </span>
        </div>
    </div>
</div>
<div class="m-content">
    <div class="m-portlet">
        <div class="m-portlet__body  m-portlet__body--no-padding">
            <div class="row m-row--no-padding m-row--col-separator-xl">
                <div class="col-md-12 col-lg-6 col-xl-3">
                    <div class="m-widget24">
                        <div class="m-widget24__item">
                            <h4 class="m-widget24__title">
                                Total Frofit
                            </h4>
                            <br>
                            <span class="m-widget24__desc">
                                All Customs Value
                            </span>
                            <span class="m-widget24__stats m--font-brand">
                                $<span class="counterup" id="totalProfit">...</span>
                            </span>
                            <div class="m--space-10"></div>
                            <div class="progress m-progress--sm">
                                <div class="progress-bar m--bg-brand" role="progressbar" style="width: 76%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <span class="m-widget24__change">
                                Change
                            </span>
                            <span class="m-widget24__number">
                                <span class="counterup">76</span>%
                            </span>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 col-lg-6 col-xl-3">
                    <div class="m-widget24">
                        <div class="m-widget24__item">
                            <h4 class="m-widget24__title">
                                New Feedbacks
                            </h4>
                            <br>
                            <span class="m-widget24__desc">
                                Customer Review
                            </span>
                            <span class="m-widget24__stats m--font-info counterup" id="newFeedbacks">
                                ...
                            </span>
                            <div class="m--space-10"></div>
                            <div class="progress m-progress--sm">
                                <div class="progress-bar m--bg-info" role="progressbar" style="width: 85%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <span class="m-widget24__change">
                                Change
                            </span>
                            <span class="m-widget24__number">
                                <span class="counterup">85</span>%
                            </span>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 col-lg-6 col-xl-3">
                    <div class="m-widget24">
                        <div class="m-widget24__item">
                            <h4 class="m-widget24__title">
                                New Orders
                            </h4>
                            <br>
                            <span class="m-widget24__desc">
                                Fresh Order Amount
                            </span>
                            <span class="m-widget24__stats m--font-danger counterup" id="newOrders">
                                ...
                            </span>
                            <div class="m--space-10"></div>
                            <div class="progress m-progress--sm">
                                <div class="progress-bar m--bg-danger" role="progressbar" style="width: 45%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <span class="m-widget24__change">
                                Change
                            </span>
                            <span class="m-widget24__number">
                                <span class="counterup">45</span>%
                            </span>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 col-lg-6 col-xl-3">
                    <div class="m-widget24">
                        <div class="m-widget24__item">
                            <h4 class="m-widget24__title">
                                New Users
                            </h4>
                            <br>
                            <span class="m-widget24__desc">
                                Joined New User
                            </span>
                            <span class="m-widget24__stats m--font-success counterup" id="newUsers">
                                ...
                            </span>
                            <div class="m--space-10"></div>
                            <div class="progress m-progress--sm">
                                <div class="progress-bar m--bg-success" role="progressbar" style="width: 57%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <span class="m-widget24__change">
                                Change
                            </span>
                            <span class="m-widget24__number">
                                <span class="counterup">57</span>%
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6 col-sm-12">
            <div class="m-portlet m-portlet--full-height">
                <div class="m-portlet__head">
                    <div class="m-portlet__head-caption">
                        <div class="m-portlet__head-title">
                            <h3 class="m-portlet__head-text">
                                Sales Summary
                            </h3>
                        </div>
                    </div>
                    <div class="m-portlet__head-tools">
                        <div class="btn-group" data-toggle="buttons">
                            <label class="btn m-btn--pill btn-secondary active">
                                <input type="radio" name="SalesSummaryDateInterval" autocomplete="off" checked="" value="@((int)SalesSummaryDatePeriod.Daily)">
                                Daily
                            </label>
                            <label class="btn m-btn--pill btn-secondary">
                                <input type="radio" name="SalesSummaryDateInterval" autocomplete="off" value="@((int)SalesSummaryDatePeriod.Daily)">
                                Weekly
                            </label>
                            <label class="btn m-btn--pill btn-secondary">
                                <input type="radio" name="SalesSummaryDateInterval" autocomplete="off" value="@((int)SalesSummaryDatePeriod.Daily)">
                                Monthly
                            </label>
                        </div>
                    </div>
                </div>
                <div class="m-portlet__body">
                    <div class="row list-separated">
                        <div class="col-md-3 col-sm-3 col-xs-6">
                            <h6>
                                Total Sales
                            </h6>
                            <div>
                                <span id="totalSales" class="counterup m--font-danger m--font-bolder">...</span> <span class="m--font-danger m--font-bolder">$</span>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-3 col-xs-6">
                            <h6>
                                Revenue
                            </h6>
                            <div class="uppercase font-hg font-green-haze">
                                <span id="revenue" class="counterup m--font-warning m--font-bolder">...</span> <span class="m--font-warning m--font-bolder">$</span>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-3 col-xs-6">
                            <h6>
                                Expenses
                            </h6>
                            <div class="uppercase font-hg font-purple">
                                <span id="expenses" class="counterup m--font-success m--font-bolder">...</span> <span class="m--font-success m--font-bolder">$</span>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-3 col-xs-6">
                            <h6>
                                Growth
                            </h6>
                            <div class="uppercase font-hg font-blue-sharp">
                                <span id="growth" class="counterup m--font-info m--font-bolder">...</span> <span class="m--font-info m--font-bolder">$</span>
                            </div>
                        </div>
                    </div>

                    <div id="salesStatisticsLoading" style="text-align: center;">
                        <div class="m-blockui" style="display: inline-block; margin-top: 120px;">
                            <span>Loading...</span><span>
                                <div class="m-loader  m-loader--brand "></div>
                            </span>
                        </div>
                    </div>

                    <div id="salesStatistics" class="portlet-body-morris-fit morris-chart" style="height: 260px; display: none">
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-sm-12">
            <div class="m-portlet m-portlet--full-height">
                <div class="m-portlet__head">
                    <div class="m-portlet__head-caption">
                        <div class="m-portlet__head-title">
                            <h3 class="m-portlet__head-text">
                                Regional Stats
                            </h3>
                        </div>
                    </div>
                </div>
                <div class="m-portlet__body">
                    <div id="region_statistics_content">
                        <div class="table-responsive">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <td class="m-widget11__label">#</td>
                                        <td class="m-widget11__app">Country</td>
                                        <td class="m-widget11__sales">Sales</td>
                                        <td class="m-widget11__change">Change</td>
                                        <td class="m-widget11__price">Avg Price</td>
                                        <td class="m-widget11__total">Total</td>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- Rows will be generated dynamically, see initRegionalStats in Index.js -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6 col-sm-12">
            <div class="m-portlet m-portlet--full-height ">
                <div class="m-portlet__head">
                    <div class="m-portlet__head-caption">
                        <div class="m-portlet__head-title">
                            <h3 class="m-portlet__head-text">
                                General Stats
                            </h3>
                        </div>
                    </div>
                    <div class="m-portlet__head-tools">
                        <a href="javascript:;" class="btn btn btn-primary" id="generalStatsReload">
                            <i class="fa fa-repeat"></i> Refresh
                        </a>
                    </div>
                </div>
                <div class="m-portlet__body">
                    <div class="row">
                        <div class="easy-pie-chart-loading col-lg-12" style="position: absolute; text-align: center; z-index: 999;">
                            <div class="m-blockui" style="display:inline-block">
                                <span>Loading...</span><span>
                                    <div class="m-loader  m-loader--brand "></div>
                                </span>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="easy-pie-chart">
                                <div class="number transactions" id="transactionPercent" data-percent="0">
                                    +<span id="transactionPercent">...</span>%
                                </div>
                                <a class="title" href="javascript:;">
                                    Transactions
                                    <i class="icon-arrow-right"></i>
                                </a>
                            </div>
                        </div>
                        <div class="margin-bottom-10 visible-sm"> </div>
                        <div class="col-md-4">
                            <div class="easy-pie-chart">
                                <div class="number visits" id="newVisitPercent" data-percent="0">
                                    +<span>...</span>%
                                </div>
                                <a class="title" href="javascript:;">
                                    New Visits
                                    <i class="icon-arrow-right"></i>
                                </a>
                            </div>
                        </div>
                        <div class="margin-bottom-10 visible-sm"> </div>
                        <div class="col-md-4">
                            <div class="easy-pie-chart">
                                <div class="number bounce" id="bouncePercent" data-percent="0">
                                    -<span>...</span>%
                                </div>
                                <a class="title" href="javascript:;">
                                    Bounce
                                    <i class="icon-arrow-right"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-sm-12">
            <div class="m-portlet m-portlet--full-height ">
                <div class="m-portlet__head">
                    <div class="m-portlet__head-caption">
                        <div class="m-portlet__head-title">
                            <h3 class="m-portlet__head-text">
                                Daily Sales
                            </h3>
                        </div>
                    </div>
                </div>
                <div class="m-portlet__body">
                    <div class="row">
                        <div class="col-md-12">
                            <canvas id="m_chart_daily_sales"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-6 col-xs-12 col-sm-12">
            <div class="m-portlet m-portlet--full-height ">
                <div class="m-portlet__head">
                    <div class="m-portlet__head-caption">
                        <div class="m-portlet__head-title">
                            <h3 class="m-portlet__head-text">
                                Profit Share
                                <small>
                                    Profit Share between customers
                                </small>
                            </h3>
                        </div>
                    </div>
                    <div class="m-portlet__head-tools">
                        <ul class="m-portlet__nav">
                            <li class="m-portlet__nav-item m-dropdown m-dropdown--inline m-dropdown--arrow m-dropdown--align-right m-dropdown--align-push" data-dropdown-toggle="hover" aria-expanded="true">
                                <a href="#" class="m-portlet__nav-link m-dropdown__toggle dropdown-toggle btn btn--sm m-btn--pill btn-secondary m-btn m-btn--label-brand">
                                    Actions
                                </a>
                                <div class="m-dropdown__wrapper">
                                    <span class="m-dropdown__arrow m-dropdown__arrow--right m-dropdown__arrow--adjust" style="left: auto; right: 40.5px;"></span>
                                    <div class="m-dropdown__inner">
                                        <div class="m-dropdown__body">
                                            <div class="m-dropdown__content">
                                                <ul class="m-nav">
                                                    <li class="m-nav__item">
                                                        <a href="" class="m-nav__link">
                                                            <i class="m-nav__link-icon flaticon-share"></i>
                                                            <span class="m-nav__link-text">
                                                                Action 1
                                                            </span>
                                                        </a>
                                                    </li>
                                                    <li class="m-nav__item">
                                                        <a href="" class="m-nav__link">
                                                            <i class="m-nav__link-icon flaticon-chat-1"></i>
                                                            <span class="m-nav__link-text">
                                                                Action 2
                                                            </span>
                                                        </a>
                                                    </li>
                                                    <li class="m-nav__item">
                                                        <a href="" class="m-nav__link">
                                                            <i class="m-nav__link-icon flaticon-info"></i>
                                                            <span class="m-nav__link-text">
                                                                Action 3
                                                            </span>
                                                        </a>
                                                    </li>
                                                    <li class="m-nav__item">
                                                        <a href="" class="m-nav__link">
                                                            <i class="m-nav__link-icon flaticon-lifebuoy"></i>
                                                            <span class="m-nav__link-text">
                                                                Action 4
                                                            </span>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="m-portlet__body">
                    <!--begin:: Widgets/Profit Share-->
                    <div class="m-widget14">
                        <div class="row align-items-center">
                            <div class="col">
                                <div id="m_chart_profit_share" class="m-widget14__chart" style="height: 160px">
                                    <div class="m-widget14__stat">
                                        45
                                    </div>
                                </div>
                            </div>
                            <div class="col">
                                <div class="m-widget14__legend">
                                    <div class="m-widget14__legend">
                                        <span class="m-widget14__legend-bullet m--bg-accent"></span>
                                        <span class="m-widget14__legend-text">

                                        </span>
                                    </div>
                                    <div class="m-widget14__legend">
                                        <span class="m-widget14__legend-bullet m--bg-warning"></span>
                                        <span class="m-widget14__legend-text">

                                        </span>
                                    </div>
                                    <div class="m-widget14__legend">
                                        <span class="m-widget14__legend-bullet m--bg-brand"></span>
                                        <span class="m-widget14__legend-text">

                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--end:: Widgets/Profit Share-->
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-xs-12 col-sm-12">
            <div class="m-portlet m-portlet--full-height ">
                <div class="m-portlet__head">
                    <div class="m-portlet__head-caption">
                        <div class="m-portlet__head-title">
                            <h3 class="m-portlet__head-text">
                                Member Activity
                            </h3>
                        </div>
                    </div>
                    <div class="m-portlet__head-tools">
                        <button id="refreshMemberActivityButton" class="btn btn-primary"><i class="fa fa-refresh"></i> Refresh</button>
                    </div>
                </div>
                <div class="m-portlet__body">
                    <table class="table m-table m-table--head-no-border" id="memberActivityTable">
                        <thead>
                            <tr class="uppercase">
                                <th colspan="2">
                                    MEMBER
                                </th>
                                <th>
                                    Earnings
                                </th>
                                <th>
                                    CASES
                                </th>
                                <th>
                                    CLOSED
                                </th>
                                <th>
                                    RATE
                                </th>
                            </tr>
                        </thead>
                        <tr>
                            <td class="fit">
                                <img class="m--img-rounded m--marginless m--img-centered small-profile-pic" src="~/metronic/src/media/app/img/users/100_1.jpg">
                            </td>
                            <td></td>
                            <td>
                                ...
                            </td>
                            <td>
                                ...
                            </td>
                            <td>
                                ...
                            </td>
                            <td>
                                <span class="bold font-green-haze">...</span>
                            </td>
                        </tr>
                        <tr>
                            <td class="fit">
                                <img class="m--img-rounded m--marginless m--img-centered small-profile-pic" src="~/metronic/src/media/app/img/users/100_2.jpg">
                            </td>
                            <td></td>
                            <td>
                                ...
                            </td>
                            <td>
                                ...
                            </td>
                            <td>
                                ...
                            </td>
                            <td>
                                <span class="bold font-green-haze">...</span>
                            </td>
                        </tr>
                        <tr>
                            <td class="fit">
                                <img class="m--img-rounded m--marginless m--img-centered small-profile-pic" src="~/metronic/src/media/app/img/users/100_3.jpg">
                            </td>
                            <td></td>
                            <td>
                                ...
                            </td>
                            <td>
                                ...
                            </td>
                            <td>
                                ...
                            </td>
                            <td>
                                <span class="bold font-green-haze">...</span>
                            </td>
                        </tr>
                        <tr>
                            <td class="fit">
                                <img class="m--img-rounded m--marginless m--img-centered small-profile-pic" src="~/metronic/src/media/app/img/users/100_4.jpg">
                            </td>
                            <td></td>
                            <td>
                                ...
                            </td>
                            <td>
                                ...
                            </td>
                            <td>
                                ...
                            </td>
                            <td>
                                <span class="bold font-green-haze">...</span>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

